<template>
  <div class="header">
    <div class="header-top">
      <div class="logo">
        <img src="@/assets/logo.png" alt="" />
      </div>
      <div class="userinfo">
        <img class="icon8" :src="userInfo.headImg" />
        <el-dropdown @command="handleLogOut">
          <span class="el-dropdown-link">
            {{ userInfo.memberName }}
            <i class="el-icon-caret-bottom el-icon--right"></i>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="logout">退出登录</el-dropdown-item>
              <el-dropdown-item>用户信息</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>
    <div class="header-menu">
      <div class="logo-name"> 青海城海物联网技术有限公司</div>
      <ul>
        <li
          v-for="(item, index) in navList"
          :class="{ cur: activeIndex == index }"
          :key="index"
          @click="handleTabNav(item, index)"
        >
          <a href="javascript:void(0);">{{ item.name }}</a>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import { logout } from "@/api";
import { mapActions } from "vuex";
export default {
  name: "Header",
  props: {
    userInfo: {
      type: Object,
    },
  },
  data() {
    return {
      activeIndex: 0,
      navList: [
        {
          path: "/DeviceScreen",
          name: "数据可视化",
          comp: "DeviceScreen",
        },
        {
          path: "/DeviceMap",
          name: "设备地图",
          comp: "DeviceMap",
        },
        {
          path: "/DeviceManage",
          name: "设备管理",
          comp: "DeviceManage",
        },
        {
          path: "/WarningSystem",
          name: "预警系统",
          comp: "WarningSystem",
        },
        // {
        //   path: "/DeviceMap",
        //   name: "诊断系统",
        //   comp: "DeviceMap"
        // },
        {
          path: "/DataReport",
          name: "统计报表",
          comp: "DataReport",
        },
      ],
    };
  },
  created() {
    this.navList.forEach((item, index) => {
      if (item.path == this.$route.path) {
        this.activeIndex = index;
      }
    });
  },
  methods: {
    ...mapActions({
      setLogout: "setLogout",
    }),
    handleLogOut(command) {
      sessionStorage.removeItem("token");
      if (command == "logout") {
        logout()
          .then((res) => {
            if (res.statusCode == 200) {
              this.$message(res.msg);
              this.setLogout();
              setTimeout(() => {
                this.$router.push("/login");
              }, 500);
            } else {
              this.$message(res.msg);
            }
          })
          .catch((err) => {
            console.log(err);
          });
      }
    },
    handleTabNav(item, index) {
      this.activeIndex = index;
      // this.$router.push({ path: item.path });
      this.$emit("change", item);
    },
  },
};
</script>
<style lang="less" scoped>
.header {
  background: #1b232d;
  padding: 0 20px;
  position: absolute;
  z-index: 10;
  top: 0;
  width: 100%;
  border-bottom: 1px solid #ccc;
  .header-top {
    width: 100%;
    display: flex;
    justify-content: space-between;
    .logo {
      width: 150px;
      padding:5px 10px 0;
      img {
        width: 100%;
      }
    }
  }
  .header-menu {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: space-between;
   .logo-name{
      color:#fff;
      font-size: 16px;
      margin-right: 150px;
      margin-top:15px;
   }
  }
  ul {
    display: flex;
    flex: 1;
    li {
      padding: 0px 30px 20px;
      font-size: 28px;
      line-height: 26px;
      cursor: pointer;
      a {
        color: #ffffff;
      }
    }
    li.cur {
      font-weight: bold;
      a{
        color:#20dbfd
      }
    }
  }
  .el-menu-demo {
    width: 900px;
    background: #1b232d;
  }
  .userinfo {
    display: flex;
    align-items: center;
    width: 140px;
    .icon8 {
      z-index: 135;
      width: 43px;
      height: 43px;
      margin-right: 15px;
    }
    .el-dropdown-link {
      cursor: pointer;
      color: #fff;
    }
    .el-icon-arrow-down {
      font-size: 12px;
    }
  }
}
</style>
